<script setup lang="jsx">
import { ref, onMounted, useAttrs } from 'vue';
import { delayFn } from '@/utils';

const { attrs } = useAttrs()

const props = defineProps({
  apiFn: {
    type: Function,
    default: () => {},
  },
  queryParams: {
    type: Object,
    default: () => {},
  },
  postParams: {
    type: Object,
    default: () => {},
  },
  valueFiled: {
    type: String,
    default: 'value',
  },
  labelFiled: {
    type: String,
    default: 'label',
  },
  valueIsObject: {
    type: Boolean,
    default: false,
  },
  formatResult: {
    type: Function,
    default: res => res,
  }
})

const  options = ref([])
const loading = ref(false)
const init = async () => {
  if (loading.value) {
    return
  }
  loading.value = true
  try {
    const res = await props.apiFn(
      { ...props.postParams },
      { ...props.queryParams },
    )
    options.value = res?.map(props?.formatResult);
  } catch (error) {}
  await delayFn()
  loading.value = false
}

onMounted(init)
</script>

<template>
  <el-select
    placeholder="请选择"
    style="width: 100%"
    class="common-select-wrapper"
    v-bind="attrs"
  >
    <el-option
      v-for="item in options"
      :value-key="valueFiled"
      :key="item[valueFiled]"
      :label="item[labelFiled]"
      :value="valueIsObject ? item : item[valueFiled]"
    />
  </el-select>
</template>

<style scoped>
  .common-select-wrapper {
    
  }
</style>
